<script setup lang="ts">
import { ref } from 'vue';

const categories = ref([
  { id: 1, name: '海岛度假', image: 'https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80' },
  { id: 2, name: '古城文化', image: 'https://images.unsplash.com/photo-1548013146-72479768bada?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80' },
  { id: 3, name: '山川自然', image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' },
  { id: 4, name: '都市探索', image: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' },
  { id: 5, name: '乡村休闲', image: 'https://images.unsplash.com/photo-1464288550599-43d5a73451b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80' }
]);
</script>

<template>
  <section>
    <div class="section-title">
      <h2>热门目的地分类</h2>
      <a href="#">查看全部</a>
    </div>
    <div class="category-grid">
      <div v-for="category in categories" :key="category.id" class="category-card">
        <img :src="category.image" :alt="category.name" />
        <div class="category-name">{{ category.name }}</div>
      </div>
    </div>
  </section>
</template>

<style scoped>
</style>